<div>
    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
      <tr>
        <th scope="col">
          <label id="visEditorDateRangeFrom{{agg.id}}">From</label>
        </th>
        <th scope="col" colspan="2">
          <label id="visEditorDateRangeTo{{agg.id}}">To</label>
        </th>
      </tr>

      <tr
        ng-repeat="range in agg.params.ranges track by $index">
        <td>
          <input
            aria-labelledby="visEditorDateRangeFrom{{agg.id}}"
            ng-model="range.from"
            validate-date-math
            type="text"
            class="form-control"
            name="range.from" />
        </td>
        <td>
          <input
            aria-labelledby="visEditorDateRangeTo{{agg.id}}"
            ng-model="range.to"
            validate-date-math
            class="form-control"
            name="range.to" />
        </td>
        <td>
          <button
            type="button"
            aria-label="Remove this range"
            ng-click="agg.params.ranges.splice($index, 1)"
            class="kuiButton kuiButton--danger kuiButton--small">
            <i class="fa fa-times" ></i>
          </button>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <small>
            <a
              class="kuiLink"
              documentation-href="date.dateMath"
              target="_blank"
              rel="noopener noreferrer"
            >
              Accepted date formats
            </a>
          </small>
        </td>
      </tr>
    </table>

    <input ng-model="agg.params.ranges.length" name="rangeLength" required min="1" type="number" class="ng-hide" />
    <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
      <p>
        <i class="fa fa-danger text-danger"></i>
        <strong>Required:</strong> You must specify at least one date range.
      </p>
    </div>

    <button
      ng-click="agg.params.ranges.push({})"
      class="kuiButton kuiButton--primary kuiButton--fullWidth"
    >
      Add Range
    </button>
  </div>
</div>
